<template>
  <div class="about">
    <h1>{{ure.val}}</h1>
   
    <button @click="ure.countadd">改变</button>
    <h1>{{cu}}</h1>
    <div>计算属性:{{nextAge}}</div>
    <button @click="cuonua">相加</button>
    <div ref="divBox">ref另外一个用法调用原生DOM</div>

    <div>--------------------Teleport传送门的使用--------------------</div>
         <modelbutton></modelbutton>
    <div>--------------------emits教程--------------------</div>
    <emits @open="onclick"></emits>
  </div>
</template>
<script>
import modelbutton from '../components/modelbutton.vue'
import emits from '../components/emit.vue'
import {reactive,toRefs,onMounted, watch, ref,getCurrentInstance,computed} from 'vue'
export default {
  components:{
    modelbutton,emits
  },
  setup() {
    //setup beforeCreate   created  生命周期无效建议直接用mounted
    let ure = add() //获取抽离出去的模块代码
    let cu = ref(0)
    let divBox = ref(null); //ref调用原生dom
    let onclick = (res)=>{ 
      console.log('click me',res)
    }
    let nextAge = computed(()=>{ //v3计算属性的使用方法
      return cu.value + 1
    })
    let cuonua = ()=>{
      cu.value++   //改变ref的值需要使用.value的方式 ref本质上还是reactive
    }
    //生命周期函数的使用
    onMounted(()=>{
      console.log('我在组件挂载到页面之后执行')
      console.log(divBox.value) //<div ref="divBox">ref的调用用法</div>
    })
    //监听器
    //使用reactive定义的变量需要使用函数返回值的形式才能监听到
    watch(()=>ure.val,(newValue,old)=>{
      console.log(`旧值${old}-----新值${newValue}`)
    })
    //监听使用ref定义的变量的时候时候,第一个参数直接使用
    watch(cu,(newValue,old)=>{
      console.log(old,newValue)
    })

   //Vue3获取当前组件实例的 getCurrentInstance 方法相当于vue2.x this  ctx 就是为了便于在开发模式下通过控制台检查的不要依赖 ctx 方法去获取组件实例来完成一些主要功能，否则在项目打包后会报错。解决办法是用proxy代替ctx.
    const {proxy} = getCurrentInstance()  
    

    return {ure,cuonua,cu,divBox,onclick,nextAge}
  },
}





//如果代码过多可以抽离出来方便维护和复用
function add(params) {
  let ure = reactive({
    val:'您好',
    name:'我好',
    countadd:() =>{
       ure.val = '哈哈哈哈哈'
    }
  })
 

 return ure
 //也可以用toRefs(ure)去解构
}
</script>
